<template>
	<view>
		<u-navbar title="个人资料" back-icon-color="#f1f1f1" :border-bottom="false" title-color="#f1f1f1" :background="navbarBackground">
			<!-- #ifndef MP-WEIXIN -->
			<text class="slot" slot="right" @tap="showLogout = true">退出登录</text>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<text class="slot" @tap="showLogout = true">退出登录</text>
			<!-- #endif -->
		</u-navbar>
		<view class="main">
			<u-cell-item title="个人头像" class="list-item" hover-class="cell-hover-class" @click="handleUpload">
				<view class="slot-right-icon" slot="right-icon"><u-image shape="circle" width="60" height="60" :src="avatar"></u-image></view>
			</u-cell-item>
			<view class="cell">
				<text>昵称</text>
				<u-input class="cell-input" :focus="true" v-model="nickname" input-align="right" :disabled="!isEdit" placeholder="请输入昵称"></u-input>
			</view>
			<view class="cell">
				<text>真实姓名</text>
				<u-input class="cell-input" v-model="realname" input-align="right" :disabled="!isEdit" placeholder="请输入真实姓名"></u-input>
			</view>
			<u-cell-item title="性别" class="list-item" :value="gender" hover-class="cell-hover-class" @click="isEdit ? (showGender = true) : false"></u-cell-item>
			<u-cell-item title="出生日期" class="list-item" :value="birth" hover-class="cell-hover-class" @click="isEdit ? (showChooseBirth = true) : false"></u-cell-item>
			<u-cell-item title="手机号码" class="list-item" :value="mobile" hover-class="cell-hover-class" @click="bindPhone"></u-cell-item>
		</view>
		<view class="fixed-btn">
			<u-button class="btn" :custom-style="style" v-if="!isEdit" :ripple="true" ripple-bg-color="#8EB7FA" @click="isEdit = true">修改资料</u-button>
			<u-button class="btn" :custom-style="btnStyle" v-else :ripple="true" ripple-bg-color="#8EB7FA" @click="handleOK">确认修改</u-button>
		</view>
		<!-- 选择性别 -->
		<u-picker mode="selector" v-model="showGender" :range="selector" @confirm="handleChooseGender"></u-picker>
		<!-- 选择日期 -->
		<u-picker v-model="showChooseBirth" title="选择出生日期" @confirm="handleConfirm" confirm-color="#3C6DBE" :safe-area-inset-bottom="true" mode="time"></u-picker>
		<!-- 绑定手机 -->
		<u-popup v-model="showPopup" border-radius="10" mode="center">
			<view class="popup">
				<text class="popup-title">绑定手机号码</text>
				<view class="popup-content">
					<view class="popup-item"><u-input v-model="phone" placeholder="请输入手机号码"></u-input></view>
					<view class="popup-item">
						<u-input v-model="code" placeholder="请输入验证码"></u-input>
						<text class="get" v-if="showCode" @click="getCode">获取验证码</text>
						<text class="time" v-else>{{ `${second}s后重发` }}</text>
					</view>
				</view>
				<view class="popup-bottom">
					<text @tap="showPopup = false">取消</text>
					<text class="confirm" @tap="handleBind">确定</text>
				</view>
			</view>
		</u-popup>
		<!-- 退出登录 -->
		<u-popup v-model="showLogout" border-radius="10" mode="center">
			<view class="popup">
				<text class="popup-title">提示</text>
				<view class="popup-content"><text>是否退出登录？</text></view>
				<view class="popup-bottom">
					<text @tap="showLogout = false">取消</text>
					<text class="confirm" @tap="handleLogout">确定</text>
				</view>
			</view>
		</u-popup>
		<!-- 上传头像 -->
		<u-popup v-model="showUpload" border-radius="10" mode="bottom">
			<view class="upload">
				<view class="upload-item" @click="chooseFromCamera">拍照</view>
				<view class="upload-item" @click="chooseFromAlbum">从手机相册选择</view>
				<view class="upload-cancel" @click="showUpload = false">取消</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { devUrl } from '../../../common/request.js';
export default {
	data() {
		return {
			navbarBackground: {
				backgroundImage: 'linear-gradient(90deg, rgb(27,52,92), rgb(49,84,142))'
			},
			btnStyle: {
				backgroundColor: '#3d6fc1',
				color: '#f1f1f1'
			},
			style: {
				background: '#F7FAFC',
				color: '#3d6fc1'
			},
			isEdit: false,
			showCode: true,
			second: 0,
			showChooseBirth: false, // 选择日期
			showUpload: false, // 选择上传
			showPopup: false, // 绑定手机
			showGender: false, // 选择性别
			showLogout: false, // 退出登录
			timer: null,
			avatarSubmit: '',
			avatar: '',
			nickname: '', // 昵称
			realname: '', // 姓名
			gender: '', // 性别
			birth: '', // 出生日期
			mobile: '', // 号码
			phone: '', // 用于绑定号码的字段
			code: '', // 验证码
			userInfo: {},
			selector: ['男', '女'],
			url: ''
		};
	},
	watch: {
		showPopup: function() {
			if (!this.showPopup) {
				setTimeout(() => {
					this.showCode = true;
					clearInterval(this.timer);
					this.timer = null;
				}, 500);
			}
		}
	},
	onLoad() {
		// #ifdef MP-WEIXIN
		uni.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		// #endif
		this.onPageInit();
	},
	methods: {
		onPageInit() {
			uni.showLoading({
				title: '加载中...'
			});
			this.$tkRequest('/api/User/userInfo').then(res => {
				this.userInfo = res.data;
				if (this.$u.test.url(this.userInfo.photo)) {
					this.avatar = this.userInfo.photo;
				} else {
					this.avatar = devUrl + this.userInfo.photo;
				}
				this.nickname = this.userInfo.username ? this.userInfo.username : '';
				this.realname = this.userInfo.realname ? this.userInfo.realname : '';
				this.gender = this.userInfo.sex == 1 ? '男' : '女';
				this.birth = this.userInfo.birthday ? this.userInfo.birthday : '';
				this.mobile = this.userInfo.mobile ? this.userInfo.mobile : '';
				this.avatarSubmit = ''; // 初始化
			});
		},
		bindPhone() {
			if (this.mobile == '' || this.isEdit) {
				this.showPopup = true;
			} else {
				this.showPopup = false;
				this.$u.toast('已绑定手机号');
			}
		},
		handleUpload() {
			if (this.isEdit) {
				this.showUpload = true;
			}
		},
		chooseFromCamera() {
			let _that = this;
			uni.chooseImage({
				sizeType: ['original', 'compressed'],
				sourceType: ['camera'],
				success: function(res) {
					let tempFilePaths = res.tempFilePaths;
					uni.uploadFile({
						url: `${devUrl}/api/Common/uploadImg`,
						filePath: tempFilePaths[0],
						name: 'file',
						success: uploadFileRes => {
							let str = JSON.parse(uploadFileRes.data);
							_that.avatarSubmit = str.data;
							_that.avatar = devUrl + str.data;
							_that.showUpload = false;
						}
					});
				}
			});
		},
		chooseFromAlbum() {
			let _that = this;
			uni.chooseImage({
				sizeType: ['original', 'compressed'],
				sourceType: ['album'],
				success: function(res) {
					let tempFilePaths = res.tempFilePaths;
					uni.uploadFile({
						url: `${devUrl}/api/Common/uploadImg`,
						filePath: tempFilePaths[0],
						name: 'file',
						success: uploadFileRes => {
							let str = JSON.parse(uploadFileRes.data);
							_that.avatarSubmit = str.data;
							_that.avatar = devUrl + str.data;
							_that.showUpload = false;
						}
					});
				}
			});
		},
		// 选择日期
		handleConfirm(value) {
			this.birth = this.$u.timeFormat(value.timestamp, 'yyyy-mm-dd');
		},
		handleBind() {
			if (!this.$u.test.mobile(this.phone)) {
				uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				});
				return false;
			} else if (this.code == '') {
				uni.showToast({
					title: '请输入验证码',
					icon: 'none'
				});
				return false;
			} else {
				this.$tkRequest('/api/User/bindMobile', {
					mobile: this.phone,
					sm_code: this.code
				}).then(res => {
					uni.showToast({
						title: '绑定成功'
					});
					this.showPopup = false;
					this.onPageInit();
				});
			}
		},
		// 选择性别
		handleChooseGender(index) {
			if (this.isEdit) {
				if (index == 0) {
					this.gender = '男';
				} else {
					this.gender = '女';
				}
				this.showGender = false;
			}
		},
		// 获取验证码
		getCode() {
			if (!this.$u.test.mobile(this.phone)) {
				uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				});
				return false;
			} else {
				this.$baseRequest(
					'/api/common/getSmCode',
					{
						mobile: this.phone,
						type: 1
					},
					'POST'
				).then(res => {
					const TIME_COUNT = 60;
					if (!this.timer) {
						this.second = TIME_COUNT;
						this.showCode = false;
						this.timer = setInterval(() => {
							if (this.second > 0 && this.second <= TIME_COUNT) {
								this.second--;
							} else {
								this.showCode = true;
								clearInterval(this.timer);
								this.timer = null;
							}
						}, 1000);
					}
				});
			}
		},
		handleOK() {
			let params = {
				username: this.nickname,
				realname: this.realname,
				mobile: this.phone,
				photo: this.avatarSubmit ? this.avatarSubmit : this.avatar,
				sex: this.gender == '男' ? 1 : 2,
				birthday: this.birth
			};
			uni.showLoading({
				title: '正在提交...'
			});
			this.$tkRequest('/api/User/update', params).then(res => {
				uni.showToast({
					title: '保存成功'
				});
				this.onPageInit();
				this.isEdit = false;
			});
		},
		handleLogout() {
			uni.removeStorageSync('tk');
			uni.setStorageSync('login_state', false);
			uni.navigateBack();
		}
	}
};
</script>

<style lang="scss" scoped>
.slot {
	padding: 0 $uni-spacing-row-lg;
	color: #f1f1f1;
	font-size: 11pt;
	/* #ifdef APP-PLUS */
	font-size: 14pt;
	/* #endif */
}

.main {
	margin: $uni-spacing-col-base 0;
	background-color: #fff;

	.slot-right-icon {
		padding: 0 $uni-spacing-row-base;
	}

	.cell {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx $uni-spacing-row-lg;
		border-bottom: 1rpx solid #f2f2f2;

		.cell-input {
			margin: 0 10rpx;
		}
	}
}

.upload {
	background-color: #f7fafc;
	font-size: 12pt;

	.upload-item {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: $uni-spacing-col-lg $uni-spacing-row-lg;
		background-color: #fff;

		&:first-child {
			border-bottom: 1rpx solid #eee;
		}
	}

	.upload-cancel {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: $uni-spacing-col-lg $uni-spacing-row-lg;
		margin-top: $uni-spacing-row-base;
		background-color: #fff;
	}
}

.popup {
	width: 80vw;
	padding: $uni-spacing-col-lg $uni-spacing-row-lg;
	display: flex;
	flex-direction: column;
	align-items: center;

	.popup-title {
		font-size: 12pt;
	}

	.popup-item {
		display: flex;
		align-items: center;
		padding: $uni-spacing-col-lg 0;

		.get {
			font-size: 11pt;
			color: #3f6cb7;
		}

		.time {
			font-size: 10pt;
			color: #c0c0c0;
		}
	}

	.popup-content {
		font-size: 1rem;
		padding: 40rpx 0;
	}

	.popup-bottom {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding-top: $uni-spacing-col-lg;
		font-size: 12pt;

		text {
			flex: 1;
			text-align: center;
		}

		.confirm {
			color: #3f6cb7;
		}
	}
}

.fixed-btn {
	width: 100%;
	position: fixed;
	left: 0;
	padding: $uni-spacing-col-lg $uni-spacing-row-lg;
	bottom: 0;
}
</style>
